<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>注册网易免费邮箱 - 中国第一大电子邮件服务商</title>
	<link rel="shortcut icon" href="image/favicon.ico">
	<link rel="stylesheet" type="text/css" href="email.css">
	<style type="text/css">
		header,footer,section,aside,article,nav,hgroup,figure,figcaption,details,summary{
			display: block;
			margin: 0;
			padding: 0;
			border: none;
		}
		time,mark,rt,rp,output,keygen,meter,progress,source{
			text-decoration: none;
			font-style: normal;
			font-weight: normal;
		}
		body,h1,h2,h3,h4,h5,h6,ul,ol,li,form,p,dl,dt,dd,table,th,td,img,blockquote{
			margin: 0;
			padding: 0;
			border: 0;
		}
	</style>

</head>
<body>
	<header class="header">
		<div class="bg"></div>
		<div class="links">
			<a href="">了解更多</a>&nbsp;&nbsp;|&nbsp;
			<a href="">反馈意见</a>
		</div>
	</header>
	<section class="content">
		<header class="content-tit">
			<h1>欢迎注册无限容量的网易邮箱！邮件地址可以登录使用其他网易旗下产品。</h1>
		</header> 
		<!-- 大框架 -->
		<div class="mainBody-wp">
			<!-- 左框架头部 -->
			<div class="mainBody">
				<div class="regTabs">
					<ul class="tabs1-on">
						<li><a href="" style="font-weight: bold; color: #FFF">注册字母邮箱</a></li>
						<li><a href="">注册手机号码邮箱</a></li>
						<li><a href="">注册VIP邮箱</a></li>
					</ul>
				</div>

			<!-- 注册窗体 -->
			<div class="regForm">
				<dl class="regForm-item">
					<!-- 输入框前文本 -->
					<dt class="regForm-title">
						<span class="txt-impt">*</span>
						邮箱地址
					</dt>
					<dd class="regForm-ct">
						<!-- 输入文本框 -->
						<input type="text" class="ipt" style="width: 200px;">
						<strong style="font-size: 14px; font-weight: bold;">@</strong>
						<select><option selected="selected">163.com</option></select>
						<!-- 输入提示 -->
						<div class="tip"><span>6~18个字符，可使用字母、数字、下划线，需以字母开头</span></div>
					</dd>
				</dl>

				<dl class="regForm-item">
					<!-- 输入框前文本 -->
					<dt class="regForm-title">
						<span class="txt-impt">*</span>
						密码
					</dt>
					<dd class="regForm-ct">
						<!-- 输入文本框 -->
						<input type="text" class="ipt" style="width: 310px;">
						<!-- 输入提示 -->
						<div class="tip"><span>6~16个字符，区分大小写</span></div>
					</dd>
				</dl>

				<dl class="regForm-item">
					<!-- 输入框前文本 -->
					<dt class="regForm-title">
						<span class="txt-impt">*</span>
						确认密码
					</dt>
					<dd class="regForm-ct">
						<!-- 输入文本框 -->
						<input type="text" class="ipt" style="width: 310px;">
						<!-- 输入提示 -->
						<div class="tip"><span>请再次填写密码</span></div>
					</dd>
				</dl>

				<dl class="regForm-item">
					<!-- 输入框前文本 -->
					<dt class="regForm-title">
						<span class="txt-impt">*</span>
						手机号码
					</dt>
					<dd class="regForm-ct">
						<!-- 输入文本框 -->
						<input id="phone" type="text" class="ipt"  style="width: 310px; padding-left:40px;"  value="+86">
						<!-- 输入提示 -->
						
						<!-- 下拉列表选项 -->
						<div class="itlSelect">
						<a href="#" class="flag-CN"><em></em>中国 +86</a>
						<a href="#" class="flag-AL"><em></em>阿尔巴尼亚(Shqipëria) +355</a>
						<a href="#" class="flag-PD"><em></em>阿尔及利亚(People's Democratic Republic of Algeria) +213</a>
						<a href="#" class="flag-RA"><em></em>阿富汗(Republic of Afghanistan) +93</a>
						<a href="#" class="flag-IR"><em></em>爱尔兰(Ireland) +353</a>
						<a href="#" class="flag-EE"><em></em>爱沙尼亚(Eesti) +372</a>
						<a href="#" class="flag-AN"><em></em>安道尔(Andorra) +376</a>
						<a href="#" class="flag-AO"><em></em>安哥拉(Angola) +244</a>
						<a href="#" class="flag-AU"><em></em>安圭拉(Anguilla) +1264</a>
						<a href="#" class="flag-AB"><em></em>安提瓜和巴布达(Antigua and Barbuda) +1268</a>
						<a href="#" class="flag-AH"><em></em>奥地利(Österreich) +43</a>
						<a href="#" class="flag-AI"><em></em>澳大利亚(Australia) +61</a>

						</div>

						<!-- 国旗图标与下拉箭头 -->
						<div class="itl">
							<div class="flag itl-flag">
								<em></em>
							</div>
						</div>

						<div class="tip"><span>忘记密码时，可以通过该手机号码快速找回密码</span></div>
					</dd>
				</dl>

			</div>

			</div>




			<aside class="mainBody-size">
				<div class="regExt">
					<img src="image/reg_master.gif">
				</div>
			</aside>


		</div>




	</section>

<script type="text/javascript">
	function select_panel(){
		// 找到下拉框里的a标签
		var links=document.querySelectorAll('.itlSelect');
		// 给找到的a标签 绑定点击事件
		for(i=0;i<links.length;i++){
			links[i].addEventListener('click',function(e){
				var a = e.target;
				// 获取a标签中的文本内容
				var txt =a.innerText;
				// 获取a标签中的class类名
				var cls =a.className;
				// 获取“+”在文本里的位置
				// 截取字符串 获取地区编码
				var area=txt.substr(txt.indexOf("+"), txt.length -  txt.indexOf("+"));
				// 设置输入框的 地区编码
				document.querySelector('#phone').setAttribute('value',area);
				// 设置input输入框的国旗标志
				var p =document.querySelector('.flag');
				p.className = " flag "+cls;


			})
		}
	}
	select_panel();

</script>
</body>
</html>